<!doctype html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <title>用户个人信息</title>
  <script src="./assets/js/require.min.js"></script>
  <script src="./assets/js/owner_work.js"></script>
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>
</head>

<body class="">
  <div class="" role="alert" id="alert_tip">
    <i class="" aria-hidden="true"></i> <span> </span>
  </div>
  <div class="page">
    <div class="col col-text mx-auto " style="margin-top: 10%;">
      <div class="dimmer " id="dimmer_body">
        <div class="loader"></div>
          <div class="card card-profile dimmer-content">
            <div class="card-header" style="background-image: url(demo/photos/aneta-ivanova-776-500.jpg);"></div>
            <div class="card-body text-center">
              <div style="display: none;">
                <input type="file" name="file" onchange="UploadFile()">
              </div>
              <img class="card-profile-img" src="" data-toggle="tooltip" data-original-title="点击图片可更换头像" onclick="selectFile()" style="cursor: pointer;">
              <h3 class="mb-3" name="user_name"> </h3>
              Email :  <span class="mb-4" name="email"> </span> <br> <br>
              账号创建时间 :    <span class="mb-4" name="create_time"> </span>
              <div class="form-footer"> 
                <a href="javascript:history.back()" class="btn btn-secondary"><i class="fe fe-arrow-left mr-2"></i> 回退</a>
                <button class="btn btn-gray-dark" data-toggle="modal" data-target="#userUnsubscribe">注销账户</button>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>

  <!-- 账户注销模态框 -->
  <div class="modal fade" id="userUnsubscribe" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="card-status bg-dark"></div>
        <div class="modal-header">
          <h4 class="text-center" id="unsubscribeModalLabel">确认框</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div class="dimmer" id="dir_unsubscribe">
          <div class="loader"></div>
          <div class="modal-body text-center dimmer-content">
            <label class="text-center"><strong> 账户一旦注销，数据会被清空，是否确定注销账户？</strong></label>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
            <button type="button" class="btn btn-gray-dark" onclick="unsubscribe()">注销</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  require(["jquery"], function($){
    getUserInfo()

  });

  // 获取用户个人信息
  function getUserInfo(){
    $("#dimmer_body").addClass("active")
    $.ajax(localStorage.BaseUrl + "/user/information", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "GET"
    }).done(function(data){
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1) {
        $("h3[name=user_name]")[0].innerText = data["data"]["user_name"]
        $("span[name=email]")[0].innerText = data["data"]["email"]
        $("span[name=create_time]")[0].innerText = data["data"]["create_time"]
        if (data["data"]["user_head_img"] != null && data["data"]["user_head_img"] != ""){
          $(".card-profile-img").attr("src", data["data"]["user_head_img"])
          localStorage.UserHeadImg = data["data"]["user_head_img"]
        }else{
          $(".card-profile-img").attr("src", "demo/faces/male/44.jpg")
        }
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(()=>{
      $("#dimmer_body").removeClass("active")
    })
  }

  // 注销账户
  function unsubscribe(){
    $("#dir_unsubscribe").addClass("active")
    $.ajax(localStorage.BaseUrl + "/user/unsubscribe", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "POST",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify({})
    }).done(function(data){
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
        setTimeout(() => {
          localStorage.clear()
          location.href = "./login.html"
        }, 2000);
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(()=>{
      $("#dir_unsubscribe").removeClass("active")
    })
  }

  // 文件上传
  function selectFile(){
    $("input[name=file]").trigger("click")
  }
  function UploadFile(){
    console.log("上传文件")
    let img_file = $("input[name=file]")[0].files[0]
    console.log(img_file)
    let fd = new FormData()
    fd.append("file", img_file)

    $.ajax(localStorage.BaseUrl + "/upload/change_head_img", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "POST",
      data: fd,
      processData: false,  //不处理发送的数据，因为data值是FormData对象，不需要对数据做处理 
      contentType: false   //不设置Content-type请求头
    }).done(function(data){
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
        getUserInfo()
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(()=>{
      $("#dir_unsubscribe").removeClass("active")
    })
  }

</script>

</html>